<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('首页')"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>今日收入</h5>
                    <h1 class="no-margins dayMoney">0</h1>
                    <div class="stat-percent font-bold text-navy dayNum">0</div>
                    <small>今日下单量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>昨日收入</h5>
                    <h1 class="no-margins yesterMoney">0</h1>
                    <div class="stat-percent font-bold text-navy yesterNum">0</div>
                    <small>昨日订单量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本月收入</h5>
                    <h1 class="no-margins monthMoney">0</h1>
                    <div class="stat-percent font-bold text-danger monthNum">0</div>
                    <small>本月订单量</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>本年收入</h5>
                    <h1 class="no-margins yearMoney">0</h1>
                    <div class="stat-percent font-bold text-danger yearNum">0</div>
                    <small>本年订单量</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>会员</h5>
                    <table class="table table-stripped small m-t-md">
                        <tbody id="memberTable">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>订单</h5>
                    <table class="table table-stripped small m-t-md">
                        <tbody id="orderTable">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>商品</h5>
                    <table class="table table-stripped small m-t-md">
                        <tbody id="goodsTable">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox">
                <div class="ibox-content">
                    <h5>交易</h5>
                    <table class="table table-stripped small m-t-md">
                        <tbody id="tradeTable">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart01"></div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart02"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>-->
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script th:inline="javascript">
    var prefix = ctx + "rest/statistics";

    $(function () {
        function getDayData() {
            console.log($.operate);
            $.operate.postAjax(prefix + "/getDayData", {}, function (res) {
                console.log(res);
                if (res.data) {
                    setAjaxData(res.data, "day");
                }
            });
        }

        function getHeadData() {
            $.operate.postAjax(prefix + "/getHeadData", {}, function (res) {
                if (res.data) {
                    if (res.data.yesterData)
                        setAjaxData(res.data.yesterData, "yester");
                    if (res.data.monthData)
                        setAjaxData(res.data.monthData, "month");
                    if (res.data.yearData)
                        setAjaxData(res.data.yearData, "year");
                }
            });
        }

        function getMonthListData() {
            $.operate.postAjax(prefix + "/getMonthListData", {}, function (res) {
                if (res.data) {
                    var monthList = res.data.monthList;
                    var yaerList = res.data.yaerList;
                    initEchartsChart01(monthList);
                    yearChart02(yaerList);
                }
            });
        }

        function getRecentData() {
            $.operate.postAjax(prefix + "/getRecentData", {}, function (res) {
                if (res.data) {
                    var memberHtml = "";
                    for (member of res.data.member) {
                        memberHtml += '<tr>\n' +
                            '<td class="no-borders">\n' +
                            '    <i class="fa fa-circle text-navy"></i>\n' +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            member.memberNo +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            member.memberName +
                            '</td>\n' +
                            '</tr>'
                    }
                    $("#memberTable").html(memberHtml)

                    var orderHtml = "";
                    for (order of res.data.order) {
                        orderHtml += '<tr>\n' +
                            '<td class="no-borders">\n' +
                            '    <i class="fa fa-circle text-navy"></i>\n' +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            order.orderNo +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            order.deskNum+"号桌" +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            order.money +
                            '</td>\n' +
                            '</tr>'
                    }
                    $("#orderTable").html(orderHtml)

                    var goodsHtml = "";
                    for (goods of res.data.goods) {
                        goodsHtml += '<tr>\n' +
                            '<td class="no-borders">\n' +
                            '    <i class="fa fa-circle text-danger"></i>\n' +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            goods.goodsName +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            goods.money +
                            '</td>\n' +
                            '</tr>'
                    }
                    $("#goodsTable").html(goodsHtml);

                    var tradeHtml = "";
                    for (trade of res.data.trade) {
                        tradeHtml += '<tr>\n' +
                            '<td class="no-borders">\n' +
                            '    <i class="fa fa-circle text-danger"></i>\n' +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            trade.memberNo +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            (trade.type == 101 ? "充值" : "消费") +
                            '</td>\n' +
                            '<td class="no-borders">\n' +
                            trade.money +
                            '</td>\n' +
                            '</tr>'
                    }
                    $("#tradeTable").html(tradeHtml)

                }
            });
        }

        function setAjaxData(statisticsData, model) {
            $("." + model + "Money").text((statisticsData.incomeMoney || 0));
            $("." + model + "Num").text((statisticsData.orderNum || 0));
        }


        getDayData();
        getHeadData();
        getMonthListData();
        getRecentData();
        window.setInterval(function () {
            getDayData();
        }, 5000);

        function initEchartsChart01(monthList) {
            var xTitel = [];
            var xData = [];
            var xDataNum = [];
            for (monthData of monthList) {
                xTitel.push(monthData.statisticsTime);
                xData.push(monthData.incomeMoney);
                xDataNum.push(monthData.orderNum);
            }
            var chartDom = echarts.init(document.getElementById("echarts-line-chart01"));
            var lineoption = {
                title: {
                    text: '本月收入趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['收入额', '订单量']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: xTitel
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                    }
                ],
                series: [
                    {
                        name: '收入额',
                        type: 'line',
                        data: xData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                    }, {
                        name: '订单量',
                        type: 'line',
                        data: xDataNum,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                    }
                ]
            };
            chartDom.setOption(lineoption);
            $(window).resize(chartDom.resize);
        }

        getMonthListData();

        function yearChart02(yearList) {
            var xTitel = [];
            var xData = [];
            var xDataNum = [];
            for (monthData of yearList) {
                xTitel.push(monthData.statisticsTime);
                xData.push(monthData.incomeMoney);
                xDataNum.push(monthData.orderNum);
            }
            var barChart = echarts.init(document.getElementById("echarts-line-chart02"));
            var baroption = {
                title: {
                    text: '今年每月收入对比图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['订单量', '收入额']
                },
                grid: {
                    x: 30,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: xTitel
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '订单量',
                        type: 'bar',
                        data: xDataNum,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    },
                    {
                        name: '收入额',
                        type: 'bar',
                        data: xData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            };
            barChart.setOption(baroption);
            window.onresize = barChart.resize;
        }

    });
</script>
</body>
</html>
